import React from 'react'
import { Card } from 'antd-mobile'
import QRCode from 'qrcode.react';
import TabBar1 from '../../components/TabBar/TabBar'
export default function CardBalance() {
    let user = "310283943"
    return (
        <div style={{ position: 'relative', background: 'linear-gradient(to bottom, rgb(255,102,0), rgb(246,246,246))', }}>
            {/* 顶部 */}
            <div style={{ padding: '6% 0', textAlign: 'center', color: 'white', fontSize: 'large', fontWeight: 'bold' }}>饭卡余额</div>
            {/* 二维码 */}
            <Card style={{ position: "absolute",width:'66%', top: "45%", left: "50%", transform: "translate(-50%, -50%)", boxShadow: "5px 5px 5px rgba(0, 0, 0, 0.3), -5px 5px 5px rgba(0, 0, 0, 0.3)", }}>
                <div style={{ borderRadius:'5px',color: 'white', backgroundColor: 'rgb(255,102,0)', fontSize: 'large', fontWeight: 'bold', textAlign: 'center', padding: '3%' }}>卡号：{user}</div>
                <QRCode
                    id="qrCode"
                    value={user}
                    size={200} // 二维码的大小
                    fgColor="#000000" // 二维码的颜色
                    style={{ margin:'9% ',textAlign:'center' }}
                    imageSettings={{ // 二维码中间的logo图片
                        src: 'logoUrl',
                        height: 100,
                        width: 100,
                        excavate: true, // 中间图片所在的位置是否镂空
                    }}
                />
                <div style={{fontSize:'large',textAlign:'center',marginTop:'-5%'}}>余额：￥1145.14</div>
            </Card>
            {/* 底部按钮 */}
            <div style={{ marginTop: '105%',marginBottom: '15%',textAlign:'center' }}>
                <button style={{display:'block',margin:'3% auto',borderRadius:'5px',width:'50%',lineHeight:'220%',height:'220%',border:'0',fontSize:'large',backgroundColor:'rgb(255,102,0)',color:'white'}}>充值</button>
                <button style={{display:'block',margin:'3% auto',borderRadius:'5px',width:'50%',lineHeight:'220%',height:'220%',border:'0',fontSize:'large',backgroundColor:'rgb(241,241,241)'}}>转入微信</button>
            </div>
            <TabBar1></TabBar1>
        </div>
    )
}
